<template>
    <div class="tableWrap" ref="tableWrap" :class="columnsName">
        <!-- 表头 -->
        <div class="tableHead" @click="demoClick">
            <div :class="item.dataIndex" v-for="item in tableColums" :key="item.key">
                <span>{{ item.title }}</span>
            </div>
        </div>
        <div :class="{ hasNewRow: isNewArr.length > 0 }" v-if="isNewArr.length > 0"></div>
        <div class="tableRow " :class="{ showNewRow: isNewArr.includes(item.id) }" v-for="(item, index) in tableData"
            :key="item.id">
            <div class="rowWrap " :class="items.dataIndex" v-for="items in tableColums" :key="items.key"
                @click="handCLick(item.id)">
                <span class="rowItem" v-if="items.dataIndex == 'index'">{{ index + 1 }}</span>
                <div class="rowItem" v-else-if="items.dataIndex == 'status'">
                    <a-badge color="green" v-if="item['status'] == 'RUNNING'" />
                    <a-badge color="yellow" v-else-if="item['status'] == 'COMPLETED'" />
                </div>
                <div class="rowItem " v-else-if="['originatorDeptName', 'titleType'].includes(items.dataIndex)">
                    <a-tooltip placement="top" :title="item[items.dataIndex]">
                        <div class="ellipsis hoverStyle">
                            {{ item[items.dataIndex] }}
                        </div>
                    </a-tooltip>
                </div>
                <div class="rowItem " v-else-if="['options'].includes(items.dataIndex)">
                    <!-- 隐患排查-数据看板 右下角详情功能 -->
                    <ShowModal :record="item" :id="item.id">
                        <a-tooltip placement="top" title="详情">
                            <a-button size="small" type="link">
                                <ZSIcon icon="icon-xiangqing"></ZSIcon>
                            </a-button>
                        </a-tooltip>
                    </ShowModal>
                </div>
                <div class="rowItem ellipsis" v-else>
                    {{ item[items.dataIndex] }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { columns, demoData } from './setting';
import smoothscroll from 'smoothscroll-polyfill';
import ShowModal from "@/components/ZSModal/ShowDialog.vue";
import ZSIcon from '@/components/ZSIcon/ZSIcon.vue';

export default {
    name: 'ZSTable',
    components: {
        ShowModal,
        ZSIcon,
    },
    props: {
        // columns: {
        //     type: [Object, Array],
        //     default: () => [],
        // },
        columnsName: {
            type: [String, Number],
            default: () => '',
        },
        data: {
            type: [Object, Array],
            default: () => [],
        },
        // 自动跳转
        isAutoPlay: {
            type: [Boolean],
            default: () => false
        },
        scroolHeight: {
            type: [Number, String],
            default: () => "",
        },
        onRefresh: {
            type: [Function],
            default: () => { }
        },
        newRowData: {
            type: Object,
            default: () => { },
        },
        // 行点击事件的回调
        onRowCLickCallBack: {
            type: Function,
        }
    },
    data() {
        return {
            tableColums: [],
            tableData: [],
            rowHeight: 32,
            // 滚动条位置
            scrollPosition: 0,
            // 定时器
            setTimeName: null,
            isNewArr: [],
        }
    },
    mounted() {
        // 平滑滚动
        smoothscroll.polyfill();
        // 如果没有传入表头数据
        if (this.columnsName != '' && this.columnsName) {
            this.tableColums = columns[this.columnsName];
        } else {
            this.tableColums = this.columns;
        }
        // 如果没有传入数据
        if (this.columnsName != '' && this.columnsName) {
            this.tableColums = columns[this.columnsName];
        } else {
            this.tableColums = this.columns;
        }
        // this.$websocket.ws.addEventListener('message', (event) => {
        //     console.log('Received message:', event.data)
        //     if(event.data && event.data.type){
        //         if(type == this.columnsName){
        //             this.hasNewData(event.data.data);
        //         }
        //     }
        // })

    },
    deactivated() {
        this.clearAll();
    },
    methods: {
        customHeaderCell: (column) => {
        },
        scrollToTop() {
            const tableWrap = this.$refs.tableWrap;
            if (tableWrap) {
                const container = table.$el.querySelector('.ant-table-body');
                if (container) {
                    container.scrollTop = 0;
                }
            }
        },
        clearAll() {
            clearInterval(this.setTimeName);
            this.setTimeName = null;
        },
        scrollTo() {
            let tableWrap = this.$refs.tableWrap
            if (!tableWrap) {
                return
            }
            // 目前位置
            let nowPosition = tableWrap.scrollTop;
            if (nowPosition > 0) {
                nowPosition = Math.ceil(nowPosition / ((this.rowHeight * 1) + 1))
            }
            let targetTop = (this.rowHeight * (nowPosition + 1));
            const maxScrollTop = tableWrap.scrollHeight - tableWrap.clientHeight;
            if (targetTop > maxScrollTop) {
                targetTop = 0;
            }
            tableWrap.scrollTo({
                top: targetTop,
                behavior: "smooth",
            })
            // 存储当前位置
            this.scrollPosition = targetTop;
            if (targetTop == 0) {
                this.clearAll();
                this.onRefresh();
            }

        },
        demo() {
            this.onRefresh();
        },
        demoClick() {
        },

        hasNewData(obj) {
            let idArr = this.tableData.filter(val => val.id == obj.id);
            if (idArr.length == 0) {
                this.isNewArr = [obj.id];
                this.tableData = this.tableData.unshift(obj);
                setTimeout(() => {
                    this.isNewArr = [];
                }, 1000)
            }
        },
        // sendMessage(message) {
        //     this.$websocket.send(message)
        // }
        // 行点击事件的回调
        handCLick(e) {
            if (typeof (this.onCallBack) == 'function') {
                this.onRowCLickCallBack(e);
            }
        }
    },
    watch: {
        data() {
            this.tableData = this.data;
            this.clearAll();
            if (this.isAutoPlay) {
                let tableWrap = this.$refs.tableWrap;
                tableWrap.scrollTo({
                    top: 0,
                    behavior: "smooth",
                })
                // let times = ['realTime', 'getCompanyRale'].includes(this.columnsName) ? 9000 : 9000;
                let times = 7000
                // 单条向上滚动了
                this.setTimeName = setInterval(() => {
                    this.scrollTo();
                }, times)
            }
        },
        newRowData(nVal, oVal) {
            if (nVal) {
                this.hasNewData(nVal);
            }
        }
    }

}
</script>
<style lang="less" scoped>
.getcompanyflowhidden,
.getCompanyRale {
    position: relative;
}

.tableWrap {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .tableHead {
        position: sticky;
        z-index: 2;
        width: 100%;
        height: 30px;
        top: 0px;
        background-image: linear-gradient(to bottom, rgba(26, 48, 102, 1), rgba(54, 102, 174, 1), rgba(54, 102, 174, 1), rgba(0, 117, 255, 1));
        display: flex;
        align-items: center;
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;

        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 2px;
            bottom: 0px;
            left: 0px;
            background-image: linear-gradient(to right, rgba(66, 103, 179, 1), rgba(115, 186, 243, 1), rgba(67, 105, 181, 1));
        }
    }

    .tableRow {
        width: 100%;
        height: 28px;
        margin: 4px 0px;
        background-image: linear-gradient(to bottom, rgba(2, 36, 121, 0.4), rgba(127, 158, 240, 0.4));
        display: flex;
        align-items: center;

        .rowWrap {
            color: #ffffff;
            font-size: 10px;

            .rowItem {}
        }
    }

    // 列样式
    .index {
        width: 28px;
        text-align: center;
    }

    .titleType {
        // 去掉状态的宽度  26px 
        width: calc(100% - 28px - 40px - 80px - 100px);
        text-align: center;
    }

    .status {
        width: 26px;
        text-align: center;
    }

    .userName {
        width: 40px;
        text-align: center;
    }

    .bizData {
        width: 80px;
        text-align: center;
    }

    .originatorDeptName {
        width: 100px;
        text-align: center;
        padding-right: 10px;

    }


    .hoverStyle {
        cursor: default;
    }



}

.formTopl0List {

    .createTime {
        width: calc(8vw);
        text-align: center;
        padding-right: 10px;

    }

    .originatorDeptName {
        width: calc(16.7vw - 60px);
        text-align: center;
        padding-right: 10px;

    }

    .options {
        width: calc(60px);
        text-align: center;
        padding-right: 10px;
    }

    .userName {
        width: 7.7vw;
        text-align: center;
        padding-right: 10px;
    }
}

.ellipsis {
    overflow: hidden;
    /* 确保超出的内容被隐藏 */
    white-space: nowrap;
    /* 保证文本在一行内显示 */
    text-overflow: ellipsis;
    /* 使用省略号表示溢出的内容 */
}

.ant-badge-status-text {
    display: none;
}

.showNewRow {
    animation: showRowAnis 1s ease-in-out forwards;
}

.hasNewRow {
    position: relative;
    height: 28px;
    width: 100%;
    margin: 4px 0px;
    animation: kongBox 1s ease-in-out forwards;
}

@keyframes showRowAnis {
    0% {
        height: 0;
        position: absolute;
        z-index: 99;
        background-color: pink;
        display: none;
    }

    30% {
        height: 28px;
        position: absolute;
        top: 16vh;
        display: none;
    }

    99% {
        position: absolute;
        top: calc(30px);
    }

    100% {
        position: relative;
    }
}

@keyframes kongBox {
    0% {
        position: relative;
        height: 0px;
        width: 100%;
        display: block;
    }

    60% {
        height: 28px;
    }

    99% {
        position: relative;
        height: 28px;
        width: 100%;
        display: block;
    }

    100% {
        position: absolute;
        display: none;
    }
}
</style>